<template>
<h1>个人简历练习</h1>
  <table border="1px">
    <caption>个人简历</caption>
    <tr>
      <th>照片</th>
      <td><img :src="person.imgUrl" alt="范传奇的照片" style="width: 100px;"></td>
    </tr>
    <tr>
      <th>姓名</th>
      <td>{{person.name}}</td>
    </tr>
    <tr>
      <th>年龄</th>
      <td>{{person.age}}</td>
    </tr>
    <tr>
      <th>好友</th>
      <td>
        <ul>
          <li v-for=" i in person.friends">{{i}}</li>
        </ul>
      </td>
    </tr>
  </table>
<button @click="add()">显示数据</button>

</template>

<script setup>
import {ref} from "vue";

const person = ref({name:'',age:'',friends:'',imgUrl:''});

const add = () =>{
  person.value.name='范传奇';
      person.value.age = '45';
      person.value.imgUrl = 'fcq.jpg';
      person.value.friends = ['路飞','索隆','娜美'];
};


</script>

<style scoped>

</style>